<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
    <script>
        /*
            DOM（Document Object Model）
                文本对象模型
                可以使用js来操作网页的对象。
                
            节点（node）
                在DOM标准下，网页中的每一部分都会转化为对象，这些对象有一个共同的称呼——————节点。

                文档节点
                元素节点
                文本节点
                属性节点
        */

    </script>
</head>

<body>
    <button id="btn">按钮</button>

    <script>
        /* 
            要使用DOM来操作网页，我们需要浏览器至少给我们一个对象，才能完成各种操作。
    
            浏览器已经为我们提供了一个document对象，它是一个全局变量，可以直接使用。
            doucument 代表的是整个网页
        */
        // console.log(document);

        const btn = document.getElementById("btn")
        console.log(btn)

        // 修改btn中的文字
        btn.innerText="Click Me"
    </script>
</body>

</html>